<template>
    <view>
        <view class="login_box u-flex u-flex-col u-row-center">
            <image class="login_img"
                   src="@/static/images/login/login_pic_logo@2x.png"
                   mode />
            <view class="login_type u-flex u-col-center"
                  v-for="(item,index) in loginTypeImg"
                  :key="index"
                  @click="loginClick(index)"
                  :style="{ 'backgroundImage': `url(${item.url})` }">
                <view class="login_text_box u-flex u-row-between">
                    <view class="login_text">{{ item.type == 'teacher' ? '教师登入' : '家长登入' }}</view>
                    <image class="right_icon"
                           src="@/static/images/login/icon_login@2x.png"
                           mode />
                </view>

                <u-button data-name-1="1"
                          data-cc="aa"
                          :id="index"
                          class="authorize_btn"
                          type="primary"
                          :ripple="true"
                          :custom-style="customStyle"
                          @click="loginType = item.type"
                          shape="circle"
                          open-type="getPhoneNumber"
                          @getphonenumber="wxGetPhoneNumber">授权登录</u-button>
            </view>
            <!-- 信息弹窗 -->
            <u-popup v-model="isLoginPopup"
                     mode="center"
                     border-radius="32"
                     :mask-close-able="false">
                <!-- 弹窗主体 -->
                <view class="login-popup">
                    <!-- 标题 -->
                    <view class="title">信息授权</view>
                    <!-- 提示 -->
                    <view class="tips2">为了给您提供更好的服务和体验，在您登录注册过程中，我们将获取您的头像昵称，我们将遵守相关法律法规，合理手机、存储、使用以上信息。</view>
                    <!-- 微信一键登录 -->
                    <!-- #ifdef MP-WEIXIN -->
                    <button class="login-btn"
                            @click="loginTest">授权微信头像昵称</button>
                    <!-- #endif -->
                    <!-- cancel -->
                    <view class="cancel-btn"
                          @click="isLoginPopup = false">暂不授权</view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            loginTypeImg: [
                { type: 'parent', url: require('@/static/images/login/login_pic_parent@2x.png') },
                { type: 'teacher', url: require('@/static/images/login/login_pic_teacher@2x.png') }
            ],
            customStyle: {
                width: '100%',
                height: '100%',
            },
            loginType: '',
            userInfo: {},
            // 登录弹窗状态
            isLoginPopup: false,

        }
    },
    onLoad() {

    },

    onShow() {
        if (uni.getStorageSync('token') == "") {
            this.isLoginPopup = true;
        }
        this.checkSession();
    },
    methods: {
        loginTest() {
            // 获取用户信息
            uni.getUserProfile({
                lang: 'zh_CN',
                desc: '登录',
                success: (infoRes) => {
                    console.log('-------------用户昵称为：', infoRes.userInfo.avatarUrl);
                    console.log('-------------用户昵称为：', infoRes.userInfo);
                    this.userInfo = infoRes.userInfo
                    this.userInfo.icon = infoRes.userInfo.avatarUrl
                    uni.setStorageSync('userInfo', this.userInfo)
                    this.isLoginPopup = false
                },
                fail: (res) => {
                    console.log(res)
                }
            });
        },
        loginClick(index) {

            if (index == 0) return
            this.$interactive.toast('开发中')
            this.$goto('push', '/pages/teacherLogin/teacherLogin')
        },

        // 检查是否登录
        checkLogin() {
            const token = uni.getStorageSync('token');
            if (!token) {
                this.checkSession()
            }
        },
        checkSession() {
            let _this = this
            uni.login({
                provider: 'weixin',
                success: function (loginRes) {
                    _this.code = loginRes.code
                    console.log('>>>>>>>>>>>>>>>>66666')

                }
            });
        },
        // // 微信获取手机号注册登录
        // getUserPhone(e) {
        //     let _this = this
        //     const { errMsg, iv, encryptedData } = e.detail;
        //     if (errMsg !== 'getPhoneNumber:ok') return;
        //     let data = {
        //         code: this.code,
        //         encryptedData: encryptedData,
        //         iv: iv
        //     }
        //     console.log('----------登陆中')
        //     uni.setStorageSync('loginType', this.loginType)
        //     if (this.loginType == 'parent') {
        //         this.$goto('reLaunch', '/pages/index/index')
        //     } else if (this.loginType == 'teacher') {
        //         this.$goto('reLaunch', '/pages/timeimagesles/timeimagesles')
        //     }
        // },
        // 授权登录
        async wxGetPhoneNumber(e) {
            console.log();
            let _this = this
            let postData = {
                appId: this.$appId,
                code: this.code
            }

            this.$api.getSessionKey(postData, res => {
                if (res.errMsg == '获取微信失败') {
                    return this.checkSession()
                }
                let sessionInfo = res.data;
                const { errMsg, iv, encryptedData } = e.detail
                if (errMsg !== 'getPhoneNumber:ok') return
                let data = {
                    appId: this.$appId,
                    encryptedData: encryptedData,
                    iv: iv,
                    sessionKey: sessionInfo.sessionKey
                }
                if (this.loginType != 'teacher') {
                    this.$api.getPhone(data, resul => {
                        console.log("获取手机号码----", resul)
                        let data = []
                        data = {
                            userName: resul.data,
                            nickName: this.userInfo.nickName,
                            icon: this.userInfo.avatarUrl,
                            appId: this.$appId,
                            openId: sessionInfo.openid,
                            unionId: sessionInfo.unionid,

                        }
                        console.log(sessionInfo);
                        this.$api.register(data, result => {
                            this.isLoginPopup = false;
                            uni.showToast({
                                title: '登录成功',
                                duration: 1500,
                                icon: 'none'
                            });
                            uni.setStorageSync('token', result.data.token);
                            setTimeout(() => {
                                uni.setStorageSync('loginType', this.loginType)
                                if (_this.loginType == 'parent') {
                                    _this.$goto('reLaunch', '/pages/index/index')
                                } else if (this.loginType == 'teacher') {
                                    _this.$goto('reLaunch', '/pages/timeimagesles/timeimagesles')
                                }
                                // _this.$goto('reLaunch', '/pages/index/index')
                            }, 500);
                        });

                    });
                } else {
                    //教师登录
                    uni.setStorageSync('sessionInfo', sessionInfo)
                    _this.$goto('reLaunch', '/pages/teacherLogin/teacherLogin')
                }

            })

        },

    }
}
</script>

<style lang="scss" scoped>
.login_box {
    position: relative;
    top: 240rpx;
    width: 80%;
    margin: auto;
    .login_img {
        width: 340rpx;
        height: 116rpx;
    }
    .login_type {
        position: relative;
        width: 100%;
        height: 280rpx;
        background-size: cover;
        background-position: center;
        margin-top: 60rpx;
        padding: 60rpx;
        .authorize_btn {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
            opacity: 0;
        }
    }
    .login_type + .login_type {
        margin-top: 40rpx;
    }
    .login_text_box {
        width: 100%;
        .login_text {
            color: #fff;
            font-size: 48rpx;
        }
        .right_icon {
            width: 56rpx;
            height: 56rpx;
        }
    }
}
/* 登录弹窗样式 */
.login-popup {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    width: 560rpx;
    // height: 438rpx;
    box-sizing: border-box;
    background-color: white;
    /* 标题 */
    .title {
        margin-top: 12rpx;
        color: #2d3d3d;
        font-size: 36rpx;
        font-weight: 800;
    }
    /* 提示 */
    .tips {
        margin-bottom: 32rpx;
        width: 472rpx;
        color: #2d3d3d;
        font-size: 24rpx;
        margin-top: 16rpx;
        line-height: 34rpx;
        text-align: center;
    }
    .tips2 {
        margin-bottom: 32rpx;
        width: 472rpx;
        color: #2d3d3d;
        font-size: 24rpx;
        margin-top: 16rpx;
        line-height: 34rpx;
    }
    /* 登录 */
    .login-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 448rpx;
        height: 68rpx;
        border-radius: 34rpx;
        background-color: #2979ff;
        // background: linear-gradient(75deg, #7cc3f2 0%, #2979ff 100%);
        font-size: 28rpx;
        color: #ffffff;
    }
    /* 暂不登录 */
    .cancel-btn {
        // padding: 10rpx 20rpx;
        color: rgba(45, 61, 61, 0.4);
        font-size: 28rpx;
        margin-top: 32rpx;
    }
}
</style>
